
let timer = null;
let num = 0;
let flag = true
function Swiper({ arr, width, obj, autoPlay = true, delay = 300,height=500,submit="" }) {
  
  this.arr = arr;
  this.width = width;
  this.obj = obj;
  this.autoPlay = autoPlay;
  this.delay = delay;
  this.height = height;
  this.submit = submit
  this.run();
  let that = this;
  if(!this.submit){
    document.querySelector(".left").addEventListener("click", function () {
      that.left();
      that.autoPlay = false;
      that.run();
    });
    document.querySelector(".right").addEventListener("click", function () {
      that.right();
      that.autoPlay = false;
      that.run();
    });
  }else{
    document.querySelector(this.submit).addEventListener("click", function () {
      
     if($('.swiper_content').find('.en_check').length==0){
        alert("还没有选择答案")
        flag = false
      }else{
        flag = true;
      }
      if(flag){
     
        that.left();
        that.autoPlay = false;
        that.run();
        $('.swiper_content').find('.en_check').attr('class','en_no')  
      }
     
    });
  }
 
}

//轮播自动播放
Swiper.prototype.run = function () {
  let that = this;

  if (this.autoPlay) {
    timer = setInterval(function () {
      that.left();
    }, that.delay);
  } else {
    clearInterval(timer);
  }
};

//渲染轮播图
Swiper.prototype.xuan = function () {

  var str = "";

  function str2(str){
    console.log(str)
    if(str.length<=1){
      return JSON.parse(str)
    }else{
      console.log(111)
      return str
    }
 }

  this.arr.exercisesId.forEach((v,i) => {
    console.log(str2(v.options))
   
    var swiper_item = `
      <div item_id=${v._id} sum=${i} class='swiper_item'>
         <p class="swiper_title">${v.topics}
         </p>

         <div class='xuanze'>
         <div class="xuanze_item">
         <div sid="0" class="en_no">A</div>
         <div class="text_swiper">${str2(v.options)[0]}</div>
         </div>

         <div class="xuanze_item">
         <div sid="1" class="en_no">B</div>
         <div class="text_swiper">${str2(v.options)[1]}</div>
         </div>


         <div class="xuanze_item">
         <div sid="2" class="en_no">C</div>
         <div class="text_swiper">${str2(v.options)[2]}</div>
         </div>


          <div class="xuanze_item">
         <div sid="3" class="en_no">D</div>
         <div class="text_swiper">${str2(v.options)[3]}</div>
         </div>
         </div>
      </div>
      `;
    str += swiper_item;
  });
  document.querySelector('.swiper').style.height = `${this.height}px`
  document.querySelector('.swiper').style.width = `${this.width}px`
  document.querySelector('.swiper_content').style.width = `${this.width*4}px`
  document.querySelector(this.obj).style.height = `${this.height}px`
  document.querySelector(this.obj).innerHTML = str;
  // document.querySelector('.swiper_item').style.width = `${this.width}px`
  document.querySelector(this.obj).style.width = `${
    this.arr.length * this.width
  }px`;
  
};

//左移

Swiper.prototype.left = function () {
  num = num + this.width;
  let S_num = parseInt($('.swiper_content').find('.en_check').parent().parent().parent().attr('sum')) + 2
  $('.di').html(`第${S_num}题`)
  // console.log(parseInt($('.swiper_content').find('.en_check').parent().parent().parent().attr('sum')));

  $(`.item_D:eq(${parseInt($('.swiper_content').find('.en_check').parent().parent().parent().attr('sum'))})`).css({
    background:'rgba(23,150,219)',
    color:'white'
  })
  $(`.item_D:eq(${parseInt($('.swiper_content').find('.en_check').parent().parent().parent().attr('sum'))})`).addClass('zhong')


   if(num !== parseInt(document.querySelector(this.obj).style.width) - parseInt(this.width)){
    $('.di').html(`第${parseInt($('.swiper_content').find('.en_check').parent().parent().parent().attr('sum')) + 1}题`)
   }

  num >= parseInt(document.querySelector(this.obj).style.width)
    ? (num = parseInt(document.querySelector(this.obj).style.width - this.width))
    : "";
   
    if(num == parseInt(document.querySelector(this.obj).style.width - this.width)){
     
   }
   
  document.querySelector(this.obj).style.transform = `translateX(-${num}px)`;
  document.querySelector(this.obj).style.transition = `.7s`;
};

//右移动
Swiper.prototype.right = function () {
  num = num - this.width;

  num < 0
    ? num = 0
   : "";
  document.querySelector(this.obj).style.transform = `translateX(-${num}px)`;
  document.querySelector(this.obj).style.transition = `.7s`;
};
